<template>
  <div class="login-page">
    <div class="login-form">
        <p class="title">amin-web后台管理系统</p>
        <el-form ref="loginForm" :model="loginForm" :rules="rules">
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item prop="code" v-if="captchaEnabled">
				<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%;"
					@keyup.enter.native="handleLogin">
					
				</el-input>
				<div class="login-code">
					<img :src="codeUrl" @click="getCode" class="login-code-img" />
				</div>
			</el-form-item>
            <el-form-item>
                <el-checkbox v-model="loginForm.isRemberPwd">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item style="width: 100%;">
                <el-button type="primary" style="width: 100%" @click="handleLogin">
                    <span v-if="!loading">登录</span>
                    <span v-else>登录中</span>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie';
import { getCodeImg } from '@/api/login';
import { encrypt, decrypt } from '@/utils/jsencrypt';
export default {
    name:'login',
    data() {
        return {
            loginForm: {
                username: 'admin',
                password:'admin123',
                isRemberPwd: true,
                code: '',
				uuid: '',
            },
            codeUrl: '',
            // 验证码开关
			captchaEnabled: false,
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'change' },
                ]
            },
            loading: false,
            redirect: undefined
        }
    },
    created() {
        this.getCode();
        this.getCookie();
	},
    watch: {
        $route: {
            immediate: true,
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            }
        }
    },
    methods: {
        getCookie() {
            const username = Cookie.get('username');
            const password = Cookie.get('password');
            const isRemberPwd = Cookie.get('isRemberPwd');
            this.loginForm = {
                username: username === undefined ? this.loginForm.username : username,
                password: password === undefined ? this.loginForm.password : decrypt(password),
                isRemberPwd: isRemberPwd === undefined ? false : Boolean(isRemberPwd),
            }
        },
        getCode() {
			getCodeImg().then((res) => {
				this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
				if (this.captchaEnabled) {
					this.codeUrl = 'data:image/gif;base64,' + res.img;
					this.loginForm.uuid = res.uuid;
				}
			});
		},
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    // 如果记住密码才存入cookie中
                    if (this.loginForm.isRemberPwd) {
                        Cookie.set('username', this.loginForm.username, { expires: 30 });
                        Cookie.set('password', encrypt(this.loginForm.password), { expires: 30 });
                        Cookie.set('isRemberPwd', this.loginForm.isRemberPwd, { expires: 30 });
                    } else {
                        Cookie.remove('username');
                        Cookie.remove('password');
                        Cookie.remove('isRemberPwd');
                    }
                    this.loginForm = {
                        ...this.loginForm,
                        username: this.loginForm.username.trim()
                    }
                    this.$store.dispatch('Login', this.loginForm)
                        .then(() => { 
                            this.loading = false;
                            this.$router.push(this.redirect || '/layout').catch(() => {})
                        })
                        .catch(() => {
                            this.loading = false;
                            if (this.captchaEnabled) {
                                this.getCode();
                            }
                        })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 200px;
    width: 100vw;
    height: 100%;
    background-image: url('@/assets/images/login-background.svg');
    background-size: cover;
}
.login-form {
    width: 400px;
    padding: 25px 25px 5px 25px;
    background-color: #fff;
    box-shadow: 0 0 10px #dcdfe6;
    border-radius: 6px;
    .title {
        color:#707070;
        text-align: center;
        font-size: 18px;
    }
    .login-code {
        float: right;
        width: 33%;
        height: 36px;
        img {
            height: 100%;
        }
    }
}
</style>